<template>
  <el-dialog
    width="990px"
    title="选择物资合同清单"
    :visible.sync="dialogTableVisibleTextarea"
    v-if="dialogTableVisibleTextarea"
    :before-close="reset"
  >
    <div class="el-dialog__body-bodys">
      <div class="bodys-right">
        <div class="bodys-right-header" style="padding-bottom: 10px;">
          已选择({{ tableDataDialogRight.length }}个)
        </div>
        <!-- 选中表格-->
        <el-table
          :data="tableDataDialogRight"
          ref="multipleTable2"
          :lineClamp="lineClampBody"
          border
          height="90%"
        >
          <el-table-column type="index" label="序号" width="55" />
          <el-table-column
            width="110"
            prop="materialsCode"
            label="设备物资编码"
            show-overflow-tooltip
          />
          <el-table-column
            width="300"
            prop="materialsName"
            label="设备物资名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="matDescribe"
            label="设备物资说明"
            show-overflow-tooltip
          />
          <el-table-column
            prop="thirdCategoriesOfName"
            label="分类名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="listAddress"
            label="交货地点"
            show-overflow-tooltip
          />
          <el-table-column
            prop="deliveryTime"
            label="交货时间"
            show-overflow-tooltip
          />
          <el-table-column width="55" label="操作">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="deleteTable(scope.row)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="bodys-left">
        <div class="bodys-left-header">
          <div style="display: flex">
            <el-search
              :formProp="formSearch"
              @search="formSearchHandler"
              @change="formSearchChange"
              width="400px"
              placement="bottom-start"
            >
              <template slot="search">
                <el-input
                  class="searchDialogInput"
                  v-model="formSearch.materialsCode"
                  clearable
                  searchLabel="设备物资编码"
                  placeholder="请输入内容设备物资编码模糊查询"
                ></el-input>
              </template>
            </el-search>
            <el-search
              :formProp="formSearch"
              @search="formSearchHandler"
              @change="formSearchChange"
              width="400px"
              placement="bottom-start"
              style="padding-left: 135px"
            >
              <template slot="search">
                <el-input
                  class="searchDialogInput"
                  v-model="formSearch.materialsName"
                  clearable
                  searchLabel="设备物资名称"
                  placeholder="请输入内容设备物资名称模糊查询"
                ></el-input>
              </template>
            </el-search>
          </div>
        </div>
        <!--选择表格-->
        <el-table
          :data="tableDataDialogLeft"
          ref="multipleTable"
          border
          :lineClamp="lineClampBody"
          style="width: 100%"
          height="70%"
          @selection-change="handleChange"
          @row-click="rowClick"
          :row-key="getRowKey"
        >
          <el-table-column reserve-selection type="selection" width="50" />
          <el-table-column
            width="110"
            prop="materialsCode"
            label="设备物资编码"
            show-overflow-tooltip
          />
          <el-table-column
            width="300"
            prop="materialsName"
            label="设备物资名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="matDescribe"
            label="设备物资说明"
            show-overflow-tooltip
          />
          <el-table-column
            prop="thirdCategoriesOfName"
            label="分类名称"
            show-overflow-tooltip
          />
          <el-table-column
            prop="listAddress"
            label="交货地点"
            show-overflow-tooltip
          />
          <el-table-column
            prop="deliveryTime"
            label="交货时间"
            show-overflow-tooltip
          />
        </el-table>
        <div class="ccui-table-footer" v-show="isShowPagination">
          <div id="ccui-paging">
            <el-pagination
              :total="totalNum"
              :page-size="pageSizeCode"
              :current-page="pageNoCode"
              :page-sizes="[10, 20, 50, 100, 200, 500]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              popper-class="ccui-paging-page-size-popper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
            <el-button
              class="ccui-pagination-btn"
              size="mini"
              type="default"
              @click="handleSizeChange('none')"
              >确定
            </el-button>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" type="default-mini" @click="reset"
        >取 消
      </el-button>
      <el-button size="mini" type="primary-font-mini" @click="getSure"
        >确 定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getSmpPcConcMatListById,
  getSmpPcConcMatListForOrderById
} from "../api/orderEntry";

export default {
  name: "contractDialogNew",
  props: {
    concId: {
      type: Number,
      default: () => null
    },
    clearTableList: {
      type: Number,
      default: () => null
    }
  },
  //    //  getConfirmPostId: Number
  //   },
  watch: {
    clearTableList(item) {
      this.tableDataDialogLeft = [];
    },
    concId(item) {
      if (item) {
        // this.getSmpPcConcMatListById(item);
        this.getList();
      }
    }
    // formDataSearch: {
    //   handler(val,oldval){
    //     console.log('当前formDataSearch:',val,"旧的formDataSearch",oldval)
    //   }
    // }
    //  dialogTableVisibleTextarea(item) {
    //    if (item) {
    //      this.$nextTick(() => {
    //        this.dialogTableVisibleTextareaData = JSON.parse(
    //          JSON.stringify(this.tableDataDialogRight)
    //        )
    //        if (this.$refs.multipleTable === undefined) return
    //        this.$refs.multipleTable.clearSelection()
    //        this.tableDataDialogRight = []
    //        //  this.tableDataDialogRight.map((e) => {
    //        //    this.tableDataDialogLeft.map((i) => {
    //        //      if (i.materialsCode === e.materialsCode) {
    //        //        this.$refs.multipleTable.toggleRowSelection(i, true)
    //        //      }
    //        //    })
    //        //  })
    //      })
    //    }
    //  },
    //  getConfirmPostId(item) {
    //    if (item) {
    //      this.listPageApprovePassSubList();
    //    }
    //  }
  },
  data() {
    return {
      contractCode: "",
      dialogTableVisibleTextarea: false,
      formSearchData: {},
      formSearch: {
        concId: "",
        materialsCode: "",
        materialsName: ""
      },
      lineClampBody: true,
      tableDataDialogLeft: [], // 选中列表
      tableDataDialogRight: [], // 选择列表
      // 分页相关
      isShowPagination: false,
      total: 0,
      totalNum: 0,
      pageNoCode: 1,
      pageSizeCode: 10
    };
  },
  methods: {
    getSmpPcConcMatListById(id) {
      this.formSearch.concId = id;
      getSmpPcConcMatListById(this.formSearch).then(res => {
        // let result = res.data.data;
        let result = res.data.data;
        result.map(e => {
          if (e.deliveryTime) {
            e.deliveryTime = e.deliveryTime.substr(0, 10);
          }
          e.only = this.generateUUID();
          e.listAddress =
            e.deliveryAreaName +
            e.provinceName +
            e.cityName +
            e.countyName +
            e.deliveryPoints;
          e.isOtherFlag = true;
          return e;
        });
        this.tableDataDialogLeft = result;
      });
    },
    getList(reqObj) {
      console.log("搜索入参", reqObj);
      let obj = {};
      obj = typeof reqObj == "object" ? reqObj : obj;
      obj.concId = this.concId;
      obj.pageSize = this.pageSizeCode;
      obj.pageNo = this.pageNoCode;
      obj.isShowPageLoading = true;
      getSmpPcConcMatListForOrderById(obj)
        .then(res => {
          this.isShowPagination = res.data.data.recordsTotal > 0;
          let result = res.data.data.rows;
          console.log("物资数据，要把", result);
          result.map(e => {
            if (e.deliveryTime) {
              e.deliveryTime = e.deliveryTime.substr(0, 10);
            }
            e.only = this.generateUUID();
            e.listAddress =
              e.deliveryAreaName +
              e.provinceName +
              e.cityName +
              e.countyName +
              e.deliveryPoints;
            e.isOtherFlag = true;
            return e;
          });
          this.tableDataDialogLeft = result;
          this.totalNum = res.data.data.recordsTotal; //总记录条数
          this.total = res.data.data.total; //总页数
          this.pageNoCode = res.data.data.pageNo; // 当前页
        })
        .catch(e => {
          console.log(e);
        });
    },
    //  selectableHandle(row) {
    //    if (row.currentNoSettlement === '0') return false
    //    return true
    //  },
    reset() {
      this.tableDataDialogRight = [];
      this.pageNoCode = 1;
      this.pageSizeCode = 10;
      if (this.concId) {
        this.getList();
      }
      this.dialogTableVisibleTextarea = false;
      // this.$emit('update:tableData', this.dialogTableVisibleTextareaData)
    },
    getRowKey(row) {
      return row.id;
    },
    rowClick(row) {
      console.log("选择行", row);
      const isExist = this.tableDataDialogRight.map(n => n.id).includes(row.id);
      this.handleChange([row]);
      this.$refs.multipleTable.toggleRowSelection(row, !isExist);
      console.log("选中数组right", this.tableDataDialogRight);
    },
    // 选择
    handleChange(selection) {
      console.log("点击选中项目", selection, "selection");
      this.tableDataDialogRight = selection;
      this.$nextTick(() => {
        this.$refs.multipleTable2.doLayout();
        // this.$refs.multipleTable2.doLayout();
      });
      // 重新布局
      console.log("选中的列表", this.tableDataDialogRight);
    },
    // 单选
    handleSelect(selection, row) {
      this.tableDataDialogRight = selection;
      this.$nextTick(() => {
        this.$refs.multipleTable2.doLayout();
        // this.$refs.multipleTable2.doLayout();
      });
    },
    // 全选
    handleSelectAll(selection) {
      this.tableDataDialogRight = selection;
      this.$nextTick(() => {
        this.$refs.multipleTable2.doLayout();
        // this.$refs.multipleTable2.doLayout();
      });
    },
    // 确定
    getSure() {
      this.tableDataDialogRight.forEach(item => {
        item.pcConcId = item.id;
        item.consignee = "";
        item.consigneePhone = "";
        item.remark = "";
      });
      this.$emit("getDialogRight", this.tableDataDialogRight, 1);
      this.$refs.multipleTable.clearSelection();
      this.tableDataDialogRight = [];
      this.pageSizeCode = 10;
      this.pageNoCode = 1;
      this.getList();
    },
    // 删除
    deleteTable(r) {
      // 删除右侧数据
      // 右侧删除, 通过过滤改变左侧选中状态
      console.log("删除的列表", r);
      // this.tableDataDialogRight = this.tableDataDialogRight.filter(
      //   e => e.materialsCode !== r.materialsCode
      // );
      // let a = this.tableDataDialogLeft.filter(
      //   item => item.materialsCode === r.materialsCode
      // );
      this.tableDataDialogRight = this.tableDataDialogRight.filter(
        e => e.only !== r.only
      );
      let a = this.tableDataDialogLeft.filter(item => item.only === r.only);
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowSelection(a[0], false);
      });
    },
    generateUUID() {
      var d = new Date().getTime();
      var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
        /[xy]/g,
        function(c) {
          var r = (d + Math.random() * 16) % 16 | 0;
          d = Math.floor(d / 16);
          return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
        }
      );
      return uuid;
    },
    // 高级搜索
    formSearchHandler() {
      this.pageNoCode = 1;
      this.formDataSearch = JSON.parse(JSON.stringify(this.formSearch));
      this.getList(this.formDataSearch);
    },
    formSearchChange() {
      this.formSearch.materialsCode = "";
      this.formSearch.materialsName = "";
    },
    // 显示条数更改
    handleSizeChange(val) {
      console.log("改变数量", this.formDataSearch);
      this.pageNoCode = 1;
      if (val != "none") {
        this.pageSizeCode = val;
      }
      console.log("搜索入参", this.formDataSearch);
      this.getList(this.formDataSearch);
    },
    // 当前页码更改
    handleCurrentChange(val) {
      // 跳转翻页都会调这个方法
      this.pageNoCode = val;
      this.getList(this.formDataSearch);
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-dialog__body {
  overflow: initial !important;
  min-height: 375px;
  height: 70vh;
}
/deep/ .el-dialog__body-bodys {
  height: 100%;
  .bodys-left {
    height: 70%;
    box-sizing: border-box;
    width: 100%;
    .bodys-left-list {
      height: 100%;
      padding: 20px;
      .list-item {
        display: flex;
        align-items: center;
        padding-left: 10px;
        padding-right: 5px;
        line-height: 35px;
        font-size: 13px;
        cursor: pointer;
        transition: 0.2s;
        &:hover,
        &.active {
          background-color: #e5f4ff;
          color: #0089ef;
        }
        .item-text {
          padding: 0 10px;
        }
      }
    }
  }
  .bodys-right {
    height: 30% !important;
    padding-bottom: 20px;
    .el-table {
      .el-radio__label {
        padding-left: 12px;
      }
      .prohibit {
        cursor: not-allowed;
      }
    }
  }
}
::v-deep .searchDialogInput.el-input.el-input--suffix input {
  padding-right: 0px;
  width: 220px;
}
::v-deep .searchDialogInput.el-input.el-input--suffix span {
  padding-left: 0px;
  // transform: translateX(50px);
}
// /deep/.el-input .el-input__clear {
//   margin-left: -86px;
// }
</style>
